<template name="liveList">
	<!-- 直播列表 -->
	<view class="liveList">
		<view class="content">
			<view class="item flex-c" v-for="(item,index) in listData" :key="index" @click="fnToLiveDetail(item.match_id)">
				<text class="text">{{item.status_name}}</text>
				<view class="flex-bc mid">
					<view class="abso_left flex-c"><text class="reduGrade" v-if="item.home_team_yellow_num">{{item.home_team_yellow_num}}</text><text
						 class="redNum" v-if="item.home_team_red_num">{{item.home_team_red_num}}</text><text>{{item.home_name}}</text></view>

					<text class="grade" v-if="item.match_status == 1">{{item.score}}</text>
					<text class="vs" v-else>vs</text>

					<view class="abso_right flex-c"><text>{{item.away_name}}</text><text class="redNum" v-if="item.away_team_red_num">{{item.away_team_red_num}}</text><text
						 class="reduGrade" v-if="item.away_team_yellow_num">{{item.away_team_yellow_num}}</text></view>
				</view>
				<text class="reduce" v-if="item.match_status == 1 && item.full_score">({{item.full_score}})</text>
				<text class="left">
					{{item.match_code}} {{item.match_type}} {{item.match_start_time}}
				</text>
				<image src="../../static/live/before.png" class="right" v-if="item.match_status == 0"></image>
				<image src="../../static/live/after.png" class="right" v-else-if="item.match_status == 2"></image>
				<image src="../../static/live/game.png" class="right" v-else></image>
			</view>
		</view>
		<view class="null" v-if="listData.length == 0">
			<view class="nullBox flex-col-ac">
				<image src="/static/common/null.png"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="footholder"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: 'liveList',
		props: {
			listData: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {

			};
		},
		onShow() {

		},
		methods: {
			fnToLiveDetail(match_id) {
				console.log(match_id)
				uni.navigateTo({
					url: `/pages/live-detail/live-detail?match_id=${match_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.null {
		width: 100%;
		height: 100%;
		background: #fff;
		position: fixed;
		.nullBox {
			position: absolute;
			top: 20%;
			left: 50%;
			width: 400rpx;
			height: 220rpx;
			transform: translateX(-50%);
			font-size: 26rpx;
			color: #999;
			image {
				width: 100%;
				height: 100%;
				display: block;
				margin-bottom: 32rpx;
			}
		}

	}

	.content {
		width: 100%;
		max-height: calc(100% - 270rpx);
		background: #fff;
		overflow-y: scroll;
		.item:nth-child(1){
			border: none;
		}
		.item {
			width: 100%;
			padding: 32rpx 30rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #F5F6F8;
			min-height: 153rpx;
			flex-direction: column;
			font-size: 28rpx;
			color: $uni-text-color;
			position: relative;

			.text {
				font-size: 20rpx;
				color: #A3A3A3;
			}

			.mid {
				margin-top: 20rpx;
				position: relative;

				text {
					padding: 0 10rpx;
				}

				.abso_left {
					position: absolute;
					bottom: 4rpx;
					right: 100%;
					white-space: nowrap;
				}

				.abso_right {
					position: absolute;
					bottom: 4rpx;
					left: 100%;
					white-space: nowrap;
				}

				.reduGrade {
					padding: 0 4rpx;
					background: #FF8021;
					border-radius: 4rpx;
					color: #fff;
					font-size: 22rpx;
				}

				.redNum {
					padding: 0 4rpx;
					background: #ED555E;
					border-radius: 4rpx;
					color: #fff;
					font-size: 22rpx;
					margin: 0 10rpx;
				}

				.vs {
					font-size: 36rpx;
					padding: 0 10rpx;
				}

				.grade {
					color: #ED555E;
					font-size: 40rpx;
					padding: 0 20rpx;
				}
			}

			.reduce {
				color: #999;
				font-size: 22rpx;
			}

			.left {
				position: absolute;
				left: 30rpx;
				top: 32rpx;
				font-size: 24rpx;
				color: #A3A3A3;

			}

			.right {
				position: absolute;
				right: 30rpx;
				bottom: 32rpx;
				width: 36rpx;
				height: 36rpx;
			}

			.reward {
				margin-right: 20rpx;
			}

			.reward-top {
				align-items: center;
				margin-bottom: 10rpx;

				text {
					margin-right: 40rpx;
					font-size: 22rpx;
					color: #777;
				}

				.reward-title {
					font-size: 28rpx;
					color: #333;
				}
			}

			.reward-bot {
				align-items: center;

				.typeIcon {
					width: 50rpx;
					height: 50rpx;
				}

				.reItem {
					margin-left: 40rpx;
				}

				.reward-num {
					display: flex;
					flex-wrap: wrap;

					text {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						background: #fa534b;
						text-align: center;
						line-height: 46rpx;
						color: #fff;
						font-size: 24rpx;
						margin: 10rpx 8rpx 10rpx 0;
					}
				}

				.re-num {
					display: flex;
					flex-wrap: wrap;

					text {
						width: 26rpx;
						height: 40rpx;
						border-radius: 4rpx;
						background: #28C83E;
						color: #fff;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
						margin: 6rpx 8rpx 6rpx 0;
					}
				}
			}
		}
	}

	/*  #ifdef  H5  */
	.footholder {
		width: 100%;
		height: var(--window-bottom);
	}

	/*  #endif  */
</style>
